<div class="container-xl">
  <!-- Page title -->
  <div class="page-header d-print-none">
    <div class="row align-items-center">
      <div class="col">
        <h2 class="page-title">
          消息通知
        </h2>
      </div>
    </div>
  </div>
</div>
<!-- 业务页面代码 -->
<div class="page-body">
  <div class="container-xl">
    <div class="row row-cards">
      <div class="col-12 col-md-4 col-xl-3">
        <a class="card card-link card-link-pop" href="#" data-bs-toggle="modal" data-bs-target="#modal-wechat">
          <div class="card-cover card-cover-blurred text-center bg-green">
            <span class="avatar avatar-xl avatar-thumb avatar-rounded" style="background-image: url(../static/img/wechat.png)">
            </span>
          </div>
          <div class="card-body text-center">
            <div class="card-title mb-1">微信</div>
            <div class="text-muted">{% if Config.message.msg_channel == "wechat" %}<span class="badge bg-green" title="已开启"></span> 正在使用{% endif %}</div>
          </div>
        </a>
      </div>
      <div class="col-12 col-md-4 col-xl-3">
        <a class="card card-link card-link-pop" href="#" data-bs-toggle="modal" data-bs-target="#modal-telegram">
          <div class="card-cover card-cover-blurred text-center bg-blue">
            <span class="avatar avatar-xl avatar-thumb avatar-rounded" style="background-image: url(../static/img/telegram.png)">
            </span>
          </div>
          <div class="card-body text-center">
            <div class="card-title mb-1">Telegram</div>
            <div class="text-muted">{% if Config.message.msg_channel == "telegram" %}<span class="badge bg-green" title="已开启"></span> 正在使用{% endif %}</div>
          </div>
        </a>
      </div>
      <div class="col-12 col-md-4 col-xl-3">
        <a class="card card-link card-link-pop" href="#" data-bs-toggle="modal" data-bs-target="#modal-serverchan">
          <div class="card-cover card-cover-blurred text-center bg-pink">
            <span class="avatar avatar-xl avatar-thumb avatar-rounded" style="background-image: url(../static/img/serverchan.png)">
            </span>
          </div>
          <div class="card-body text-center">
            <div class="card-title mb-1">Server酱</div>
            <div class="text-muted">{% if Config.message.msg_channel == "serverchan" %}<span class="badge bg-green" title="已开启"></span> 正在使用{% endif %}</div>
          </div>
        </a>
      </div>
      <div class="col-12 col-md-4 col-xl-3">
        <a class="card card-link card-link-pop" href="#" data-bs-toggle="modal" data-bs-target="#modal-bark">
          <div class="card-cover card-cover-blurred text-center bg-red">
            <span class="avatar avatar-xl avatar-thumb avatar-rounded" style="background-image: url(../static/img/bark.webp)">
            </span>
          </div>
          <div class="card-body text-center">
            <div class="card-title mb-1">Bark</div>
            <div class="text-muted">{% if Config.message.msg_channel == "bark" %}<span class="badge bg-green" title="已开启"></span> 正在使用{% endif %}</div>
          </div>
        </a>
      </div>
    </div>
  </div>
</div>
<div class="modal modal-blur fade" id="modal-wechat" tabindex="-1" role="dialog" aria-hidden="true" data-bs-backdrop="static" data-bs-keyboard="false">
  <div class="modal-dialog modal-lg modal-dialog-centered" role="document">
    <div class="modal-content">
      <div class="card border-top-0">
        <div class="card-header">
          <h5 class="modal-title">微信</h5>
          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
        </div>
        <div class="card-body">
          <div class="row">
            <div class="col-lg-4">
              <div class="mb-3">
                <label class="form-label required">企业ID <span class="form-help bg-red-lt" title="每个企业都拥有唯一的corpid，获取此信息可在管理后台“我的企业”－“企业信息”下查看“企业ID”（需要有管理员权限）" data-bs-toggle="tooltip">?</span></label>
                <input type="text" value="{% if Config.message.wechat %}{{ Config.message.wechat.corpid or '' }}{% endif %}" id="corpid" class="form-control">
              </div>
            </div>
            <div class="col-lg-4">
              <div class="mb-3">
                <label class="form-label required">Secret <span class="form-help bg-red-lt" title="自建应用secret。在管理后台->“应用与小程序”->“应用”->“自建”，点进某个应用，即可看到" data-bs-toggle="tooltip">?</span></label>
                <input type="text" value="{% if Config.message.wechat %}{{ Config.message.wechat.corpsecret or '' }}{% endif %}" id="corpsecret" class="form-control">
              </div>
            </div>
            <div class="col-lg-4">
              <div class="mb-3">
                <label class="form-label required">AgentId <span class="form-help bg-red-lt" title="每个应用都有唯一的agentid。在管理后台->“应用与小程序”->“应用”，点进某个应用，即可看到agentid" data-bs-toggle="tooltip">?</span></label>
                <input type="text" value="{% if Config.message.wechat %}{{ Config.message.wechat.agentid or '' }}{% endif %}" id="agentid" class="form-control">
              </div>
            </div>
          </div>
          <div class="row">
            <div class="col-lg-4">
              <div class="mb-3">
                <label class="form-check form-switch">
                  <input class="form-check-input" type="checkbox" id="default_proxy" {% if Config.message.wechat %}{% if Config.message.wechat.default_proxy %}checked{% endif %}{% endif %}>
                  <span class="form-check-label">使用微信代理服务器 <span class="form-help bg-red-lt" title="由于微信官方限制，2022年6月20日后创建的企业微信应用需要有固定的公网IP地址并加入IP白名单后才能发送消息，使用代理服务器转发可解决该问题，选中该项则代表使用默认的代理服务器：1、默认的代理服务器为免费使用，仅转发请求不会收集用户数据，如不放心可不使用；2、需要将nastool.jxxghp.cn域名对应的IP地址加入企业微信应用的白名单中（通过ping域名获取IP地址）" data-bs-toggle="tooltip">?</span></span>
                </label>
              </div>
            </div>
          </div>
        </div>
        <div class="card-body">
          <div class="row">
            <div class="col-lg-6">
              <div class="mb-3">
                <label class="form-label">Token <span class="form-help bg-red-lt" title="在微信企业应用接收消息设置页面生成并填入，填入完成后重启本应用，然后再在微信页面输入地址确定" data-bs-toggle="tooltip">?</span></label>
                <input type="text" value="{% if Config.message.wechat %}{{ Config.message.wechat.Token or '' }}{% endif %}" id="Token" class="form-control">
              </div>
            </div>
            <div class="col-lg-6">
              <div class="mb-3">
                <label class="form-label">EncodingAESKey <span class="form-help bg-red-lt" title="在微信企业应用接收消息设置页面生成并填入，填入完成后重启本应用，然后再在微信页面输入地址确定" data-bs-toggle="tooltip">?</span></label>
                <input type="text" value="{% if Config.message.wechat %}{{ Config.message.wechat.EncodingAESKey or '' }}{% endif %}" id="EncodingAESKey" class="form-control">
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="modal-footer">
        <a href="javascript:test_message_config('wechat')" id="wechat_test_btn" class="btn btn-white me-auto">
          测试
        </a>
        <a href="javascript:save_message_config('wechat')" id="wechat_save_btn" class="btn btn-primary">确定</a>
      </div>
    </div>
  </div>
</div>
<div class="modal modal-blur fade" id="modal-telegram" tabindex="-1" role="dialog" aria-hidden="true" data-bs-backdrop="static" data-bs-keyboard="false">
  <div class="modal-dialog modal-lg modal-dialog-centered" role="document">
    <div class="modal-content">
      <div class="card border-top-0">
        <div class="card-header">
          <h5 class="modal-title">Telegram</h5>
          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
        </div>
        <div class="card-body">
          <div class="row">
            <div class="col-lg-6">
              <div class="mb-3">
                <label class="form-label required">Bot Token <span class="form-help bg-red-lt" title="telegram机器人的Token，关注BotFather创建机器人" data-bs-toggle="tooltip">?</span></label>
                <input type="text" value="{% if Config.message.telegram %}{{ Config.message.telegram.telegram_token or '' }}{% endif %}" id="telegram_token" class="form-control">
              </div>
            </div>
            <div class="col-lg-6">
              <div class="mb-3">
                <label class="form-label required">Chat Id <span class="form-help bg-red-lt" title="telegram中关注getuserID获取" data-bs-toggle="tooltip">?</span></label>
                <input type="text" value="{% if Config.message.telegram %}{{ Config.message.telegram.telegram_chat_id or '' }}{% endif %}" id="telegram_chat_id" class="form-control">
              </div>
            </div>
          </div>
        </div>
        <div class="card-body">
          <div class="row">
            <div class="col-lg-6">
              <div class="mb-3">
                <label class="form-check form-switch">
                  <input class="form-check-input" type="checkbox" id="webhook" {% if  Config.message.telegram.webhook %}checked{% endif %}>
                  <span class="form-check-label">WebHook <span class="form-help bg-red-lt" title="受Telegram限制，程序外网访问地址需要设置为以下端口之一：443, 80, 88, 8443，且需要有公网认证的可信SSL证书" data-bs-toggle="tooltip">?</span></span>
                </label>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="modal-footer">
        <a href="javascript:test_message_config('telegram')" id="telegram_test_btn" class="btn btn-white me-auto">
          测试
        </a>
        <a href="javascript:save_message_config('telegram')" id="telegram_save_btn" class="btn btn-primary">确定</a>
      </div>
    </div>
  </div>
</div>
<div class="modal modal-blur fade" id="modal-serverchan" tabindex="-1" role="dialog" aria-hidden="true" data-bs-backdrop="static" data-bs-keyboard="false">
  <div class="modal-dialog modal-lg modal-dialog-centered" role="document">
    <div class="modal-content">
      <div class="card border-top-0">
        <div class="card-header">
          <h5 class="modal-title">Server酱</h5>
          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
        </div>
        <div class="card-body">
          <div class="row">
            <div class="col-lg-12">
              <div class="mb-3">
                <label class="form-label required">SCKEY <span class="form-help bg-red-lt" title="填写ServerChan的API Key，SCT类型，在https://sct.ftqq.com/中申请" data-bs-toggle="tooltip">?</span></label>
                <input type="text" value="{% if Config.message.serverchan %}{{ Config.message.serverchan.sckey or '' }}{% endif %}" id="sckey" class="form-control">
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="modal-footer">
        <a href="javascript:test_message_config('serverchan')" id="serverchan_test_btn" class="btn btn-white me-auto">
          测试
        </a>
        <a href="javascript:save_message_config('serverchan')" id="serverchan_save_btn" class="btn btn-primary">确定</a>
      </div>
    </div>
  </div>
</div>
<div class="modal modal-blur fade" id="modal-bark" tabindex="-1" role="dialog" aria-hidden="true" data-bs-backdrop="static" data-bs-keyboard="false">
  <div class="modal-dialog modal-lg modal-dialog-centered" role="document">
    <div class="modal-content">
      <div class="card border-top-0">
        <div class="card-header">
          <h5 class="modal-title">Bark</h5>
          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
        </div>
        <div class="card-body">
          <div class="row">
            <div class="col-lg-6">
              <div class="mb-3">
                <label class="form-label required">服务器地址 <span class="form-help bg-red-lt" title="自己搭建Bark服务端请实际配置，否则可使用：https://api.day.app" data-bs-toggle="tooltip">?</span></label>
                <input type="text" value="{% if Config.message.bark %}{{ Config.message.bark.server or '' }}{% endif %}" id="server" class="form-control" placeholder="https://api.day.app">
              </div>
            </div>
            <div class="col-lg-6">
              <div class="mb-3">
                <label class="form-label required">API Key <span class="form-help bg-red-lt" title="Bark客户端生成的KEY" data-bs-toggle="tooltip">?</span></label>
                <input type="text" value="{% if Config.message.bark %}{{ Config.message.bark.apikey or '' }}{% endif %}" id="apikey" class="form-control">
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="modal-footer">
        <a href="javascript:test_message_config('bark')" id="bark_test_btn" class="btn btn-white me-auto">
          测试
        </a>
        <a href="javascript:save_message_config('bark')" id="bark_save_btn" class="btn btn-primary">确定</a>
      </div>
    </div>
  </div>
</div>
<script type="text/javascript">
  // 当前处理的类型
  var currType = "";
  // 保存配置
  function save_config(type, func, test){
    currType = type;
    var cfg_value = {};
    var params = {"test": test||false};
    $("#modal-"+ type +" input").each(function(){
      var key = $(this).attr("id");
      if($(this).attr("type")=="checkbox"){
        var value = $(this).prop("checked") ? true:false;
      }else{
        var value = $(this).val();
      }
      cfg_value[key] = value;
    });
    params["message." + type] = cfg_value;
    params['message.msg_channel'] = type;
    ajax_post("update_config", params, func);
  }

  //保存配置、关闭和刷新页面
  function save_message_config(type){
    $("#modal-"+type).modal('hide');
    save_config(type, function (ret) {
      navmenu('notification');
    });
  }

  //保存配置和测试配置
  function test_message_config(type){
    $("#" + type + "_test_btn").text("测试中...");
    save_config(type, function (ret) {
      if(currType == "bark"){
        command = "message.channel.bark|Bark";
      }else if(currType == "wechat"){
        command = ["WeChat().get_status()"];
      }else if(currType == "telegram"){
        command = ["Telegram().get_status()"];
      }else if(currType == "serverchan"){
        command = "message.channel.serverchan|ServerChan";
      }
      ajax_post("test_connection", {"command": command}, function(ret){
        if(ret.code == 0){
          $("#" + currType + "_test_btn").text("测试成功");
        }else{
          $("#" + currType + "_test_btn").text("测试失败！");
        }
      });
    }, true);
  }
</script>